<template>
  <div>
    <div class="operate_wrap flex" style="margin-left: 25px">
      <div class="flex-center g-flex flex-right">
        <el-select v-if="statusIndex == 1" class="select" size="small" v-model="search.enginType" v-on:change="fixQueryA(),changeSelect()" value-key="id" placeholder="选择工程类型" clearable>
          <el-option v-for="(item,index) in selectList.enginTypeList" :key="'engin'+index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <el-select v-if="statusIndex == 2" class="select" size="small" v-model="search.projectId" v-on:change="getLeftList()" value-key="id" filterable placeholder="选择项目">
          <el-option v-for="item in selectList.projectList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

      </div>
      <div class="flex-center">
        <div class="status-item" v-if="statusIndex == 1">
          <img alt="#" src="@/assets/images/approveItem/table/brown.png" />
          <span>可以办理</span>
        </div>
        <div class="status-item" v-if="statusIndex == 1">
          <img alt="#" src="@/assets/images/approveItem/table/blue.png" />
          <span>进行中</span>
        </div>
        <div class="status-item" v-if="statusIndex == 1">
          <img alt="#" src="@/assets/images/approveItem/table/green.png" />
          <span>已完成</span>
        </div>
        <div class="status-item" v-if="statusIndex == 1">
          <img alt="#" src="@/assets/images/approveItem/table/red.png" />
          <span>已延期</span>
        </div>
        <div class="status-iconfont">
          <i v-show='lbShow' :class="statusIndex == 1?'changeBlue':''" class="iconfont icon-liebiao" @click="statusIndex = 1" />
          <i :class="statusIndex == 2?'changeBlue':''" class="iconfont icon-xiangmu-AI" @click="statusIndex = 2" />
        </div>
      </div>
    </div>
    <div v-if="statusIndex == 1" style="margin: 20px 20px 10px 20px;" class="WholeScroll">
      <el-table ref="multipleTable" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" :data="snakeTableData" tooltip-effect="dark" @cell-click="cellClick" :height="tableHeight" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px" v-loading="isLoading" @selection-change="handleSelectionChange">
        <el-table-column prop="projectSimpleName" align="center" label="项目简称" min-width="140" fixed="left">
          <template slot-scope="scope">
            <div>{{scope.row.projectSimpleName}}</div>
          </template>
        </el-table-column>
        <!--  -->
        <el-table-column :prop="item.code" align="center" :label="item.name" v-for="(item,index) in itemlabelList[search.enginType]" :key="'enginType'+index" :width="labelWidth1">
          <template slot-scope="scope">
            <div class="img-box">
              <img v-if="scope.row[item.code]" alt="#" :src="tableImgFuc(scope.row[item.code].status)" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="content-box" id="content-box" v-if="statusIndex == 2">
      <!--TODO-->
      <div class="left-box">
        <div class="left-box-scroll WholeScroll">
          <div class="flex-row-center" v-for="(item,index) in textArr" :key="index">
            <p @click="clickLeftText(item,index)" :title="item.approveName" :class="chooseLeftIndex==index?'chooseText':''">
              {{item.approveName}}
            </p>
            <div v-if="item.approveName !=='批复成果汇总'" :class="colorDiv(item)" class="baseDiv"></div>
          </div>
        </div>
        <div class="left-bottom-box flex-hvCenter" @click="showApprovalDialog = true,getUnusefulApprovals()">本项目需要那些前期手段?</div>
      </div>
      <div class="right-box">
        <div v-if="textArr[chooseLeftIndex]&&textArr[chooseLeftIndex].approveName !== '批复成果汇总'">
          <div class="right-add-box operate_wrap">
            <el-button type="primary" size="small" class="add buildButtonStyle" @click="showRightAddDialog" v-permission="permission.add"><i class="iconfont icon-icon_add"></i> 新增
            </el-button>
          </div>
          <el-tabs style="margin-bottom: 0" v-model="rightActiveName">
            <el-tab-pane label="批复过程" name="rightFirst"></el-tab-pane>
            <el-tab-pane label="问题登记" name="rightSecond"></el-tab-pane>
          </el-tabs>
          <div class="rightFirst WholeScroll" v-if="rightActiveName == 'rightFirst'">
            <div class="rightFirstItem" v-for="(item,index) in rightFirstList" :key="index">
              <div class="flex-row">
                <div :class="circleDiv(item)"></div>
                <span class="statusSpan">{{item.status}}</span>
                <span class="normalText">
                  (
                  <span class="blueText"><span v-permission="permission.show" @click="rightHandleClickDeal(item,'show')">查看</span>
                    <span v-permission="permission.edit" @click="rightHandleClickDeal(item,'update')">&nbsp;|&nbsp;编辑</span>
                  </span><span class="redText" v-permission="permission.del" @click="rightHandleClickDeal(item,'delete')">&nbsp;|&nbsp;删除</span>
                  )
                </span>
              </div>
              <div style="width: 80%;" v-for="(child,childIndex) in item.workContent" :key="childIndex">
                <div class="item-content"><span :style="changeTextStyle(child.status)">{{child.workContent}}</span>&nbsp;&nbsp;<div class="solid-line"></div>&nbsp;&nbsp;<span v-if="item.approvalStatus == '2'">{{item.date}}</span><span v-if="item.approvalStatus == '1'">{{child.endDate?child.endDate:'暂无结束时间'}}</span></div>
                <div class="file-box">
                  <div class="file-item" v-for="(fileItem,fileIndex) in child.files" :key="fileIndex">
                    <el-tooltip effect="dark" :content="fileItem.fileName" placement="top">
                      <span style="font-size: 14px" @click="preview(fileItem)">{{fileItem.fileName}}</span>
                    </el-tooltip>
                    <div class="fileButtonGroup">
                      <el-button @click="preview(fileItem)" type="primary" size="mini" round>查看</el-button>
                      <el-button @click="download(fileItem)" type="primary" size="mini" round>下载</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: 418px" class="flex-hv" v-if="rightFirstList.length == 0">
              <div class="flex-column-center" style="height: 100%">
                <img src="@/assets/images/homePage/no-img.png" alt="待办缺省" />
                <div class="tipTitle">暂无数据</div>
              </div>
            </div>
          </div>
          <div class="list_wrap" v-if="rightActiveName == 'rightSecond'">
            <el-table class="project-management-info" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="rightSecondList" tooltip-effect="dark" @cell-click="cellClick2" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px" @selection-change="handleSelectionChange">
              <el-table-column show-overflow-tooltip label="序号" type="index" width="57">
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="createTime" align="left" min-width="160" label="存在问题">
                <template slot-scope="scope">
                  <div style="text-align: left">
                    {{ scope.row.problem}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="createTime" align="left" min-width="160" label="所在周">
                <template slot-scope="scope">
                  <div style="text-align: left">
                    {{ scope.row.postWeek}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="280" align="left">
                <template slot-scope="scope">
                  <el-button v-permission="permission.show" type="warning" class="menu_icon iconfont icon-icon_look action_color1" size="mini" @click="rightHandleClickDeal(scope.row,'show')">&nbsp;查看</el-button>
                  <el-button v-permission="permission.edit" size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" @click="rightHandleClickDeal(scope.row,'update')">&nbsp;修改</el-button>

                  <el-button v-permission="permission.del" slot="reference" class="menu_icon iconfont icon-shanchu action_color2" size="mini" @click="rightHandleClickDeal(scope.row,'delete')">&nbsp;删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination style="float: right; margin-top: 30px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.pageSum" :current-page="search.pageIndex + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
            </el-pagination>
          </div>

        </div>
        <div v-else class="list_wrap">
          <el-table :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="leftTable" tooltip-effect="dark" :height="LeftTableHeight" style="font-family: PingFangSC-Regular; font-size: 14px" @selection-change="handleSelectionChange">
            <el-table-column show-overflow-tooltip label="序号" prop="listIndex" width="50">
              <template slot-scope="scope">
                <span>{{leftTableSearch.pageIndex * leftTableSearch.pageSize + scope.row.listIndex + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="createTime" align="left" width="450" label="批复项">
              <template slot-scope="scope">
                <div style="text-align: left">
                  {{ scope.row.approveName}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" align="left" min-width="160" label="批复文件">
              <template slot-scope="scope">
                <div class="blue-file-text" :style="{marginBottom:scope.row.files.length == 1?'0':''}" v-if="scope.row.files.length>0" v-for="(item,index) in scope.row.files" :key="index">
                  <el-tooltip effect="dark" :content="item.fileName" placement="top">
                    <span @click="preview(item)">{{item.fileName}}</span>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="createTime" align="left" width="220" label="批复日期">
              <template slot-scope="scope">
                <div style="text-align: left">
                  {{ scope.row.approveTime}}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!--     <el-pagination
            style="float: right; margin-top: 30px"
            layout="prev, pager, next"
            :page-size="leftTableSearch.pageSize"
            :total="leftTableSearch.pageSum"
            :current-page="leftTableSearch.pageIndex + 1"
            :prev-text="tablePaginationPrev"
            :next-text="tablePaginationNext"
            @current-change="leftTablePaginationChange"
          >
          </el-pagination>-->
        </div>
      </div>
    </div>
    <!--选择本项目需要哪些前期手段-dialog-->
    <el-dialog width="50%" :visible.sync="showApprovalDialog" :modal-append-to-body="false" :close-on-click-modal="false" v-dialog-drag @close="cancelApprovalSelect" append-to-body>
      <span slot="title">
        <span>批复项设置</span>
      </span>
      <el-form style="height: 500px;" :model="approvalFormBaseData" ref="approvalFormBase" :rules="approvalFormBaseRules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择不需要的批复项" prop="approvalIds" :label-width="formlabelWidth">
              <el-select style="width: 100%" v-model="approvalFormBaseData.approvalIds" filterable multiple placeholder="">
                <el-option v-for="(item, i) in approvalList" :key="i" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" :label-width="formlabelWidth">
              <span style="color: red;">*<span style="color: #000;font-size: 12px">注意：上面选择的批复项，本项目不需要办理相应手续</span></span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--api操作按钮 除去上报-->
        <!--新建和编辑的暂存上报-->

        <template>
          <el-button size="small" type="primary" :loading="isLoading" @click="submitApproval"><i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="cancelApprovalSelect"><i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>

    <el-drawer size="60%" :before-close="handleClose" :visible.sync="drawer" :with-header="false">
      <div class="drawerBox">
        <div class="title-box">
          <el-tabs class="tabs-class" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="批复文件" name="first"></el-tab-pane>
            <el-tab-pane label="问题登记" name="second"></el-tab-pane>
          </el-tabs>
          <span class="drawer-span">{{chooseTitle}}</span>
        </div>
        <div class="operate_wrap" style="padding: 0 20px">
          <el-button type="primary" size="small" class="add buildButtonStyle" @click="showAddDialog" v-permission="permission.add"><i class="iconfont icon-icon_add"></i> 添加
          </el-button>
        </div>
        <div class="list_wrap WholeScroll" style="padding: 0 20px">
          <el-table v-if="activeName == 'first'" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" @cell-click="cellClick2" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px" :height="tableHeight2" :span-method="objectSpanMethod">
            <el-table-column show-overflow-tooltip label="状态" prop="statusName" width="80">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="workContent" align="left" min-width="160" label="工作内容">
              <template slot-scope="scope">
                <div style="text-align: left">
                  {{ scope.row.workContent}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="result" align="left" min-width="160" label="成果">
              <template slot-scope="scope">
                <div class="chooseFileName" :title="item.fileName" style="text-align: left;color: #3270ef;cursor: pointer" v-for="(item,index) in scope.row.files" :key="index">
                  <span @click="viewFile(item)">{{ item.fileName}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="showDate" align="left" width="160" label="完成时间">
              <template slot-scope="scope">
                <div style="text-align: left">
                  {{ scope.row.showDate}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="actions" width="280" align="left">
              <template slot-scope="scope">
                <el-button v-permission="permission.show" type="warning" class="menu_icon iconfont icon-icon_look action_color1" size="mini" @click="handleClickDeal(scope.row,'show')">&nbsp;查看</el-button>
                <el-button v-permission="permission.edit" size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" @click="handleClickDeal(scope.row,'update')">&nbsp;修改</el-button>

                <el-button v-permission="permission.del" slot="reference" class="menu_icon iconfont icon-shanchu action_color2" size="mini" @click="handleClickDeal(scope.row,'delete')">&nbsp;删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-if="activeName == 'second'" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" class="project-management-info" :border="true" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" @cell-click="cellClick2" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px" @selection-change="handleSelectionChange">
            <el-table-column show-overflow-tooltip label="序号" type="index" width="57">
              <template slot-scope="scope">
                <span>{{search.pageIndex * search.pageSize + scope.row.listIndex + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip v-for="(item, i) in elTableList" :key="i" :width="item.width" align="left" :prop="item.prop" :label="item.name">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="createrName" align="left" min-width="100" label="登记人">
              <template slot-scope="scope">
                <div style="text-align: left">
                  {{ scope.row.createrName}}
                </div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="createTime" align="left" min-width="160" label="登记时间">
              <template slot-scope="scope">
                <div style="text-align: left">
                  {{ scope.row.createTime}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280" align="left">
              <template slot-scope="scope">
                <el-button v-permission="permission.show" type="warning" class="menu_icon iconfont icon-icon_look action_color1" size="mini" @click="handleClickDeal(scope.row,'show')">&nbsp;查看</el-button>
                <el-button v-permission="permission.edit" size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" @click="handleClickDeal(scope.row,'update')">&nbsp;修改</el-button>

                <el-button v-permission="permission.del" slot="reference" class="menu_icon iconfont icon-shanchu action_color2" size="mini" @click="handleClickDeal(scope.row,'delete')">&nbsp;删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="float: right; margin-top: 30px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.pageSum" :current-page="search.pageIndex + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
          </el-pagination>
        </div>
      </div>
    </el-drawer>
    <fileDetail v-if='statusIndex == 2' :postDetail="postFileDetailData" @reloadList="getList(1),getApproveItemDefault(),getFirstList()"></fileDetail>
    <fileDetail v-else :postDetail="postFileDetailData" @reloadList="getListFirst(),getFirstList(),getApproveItemDefault()"></fileDetail>
    <problemDetail v-if='statusIndex == 2' :postDetail="postProblemDetailData" @reloadList="getList(2),getSecondList(),getApproveItemDefault()"></problemDetail>
    <problemDetail v-else :postDetail="postProblemDetailData" @reloadList="getListSecond(),getApproveItemDefault()"></problemDetail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import msgUtil from '@/utils/msgUtil'
import crudDict from '@/api/system/dict'
import projectSectionInfo from '@/api/buss/common'
import { approvalSubmitSetting, getSnakeData, getListForFile, getListForProblem, delItem, delProblem, getCompanyTreeItem, getAllProject, getApprovalList, getPermission, getUnusefulApprovals, getLeftList, getAchieveSum, getAllApprovalDict } from '@/api/buss/frontProject'
import file from '@/api/file'
export default {
  name: 'item',
  components: {
    fileDetail: require(`./item-detail/item-file-detail`).default,
    problemDetail: require(`./item-detail/item-problem-detail`).default
  },
  data() {
    return {
      formlabelWidth: '150px', // 表单左侧标题宽度

      approvalFormBaseData: {
        approvalIds: '',
        oldApprovalIds: '',
      },
      approvalFormBaseRules: {
      },
      approvalList: [],
      showApprovalDialog: false,
      chooseLeftIndex: 0,
      rightActiveName: 'rightFirst',
      rightFirstList: [],
      rightSecondList: [],

      textArr: [],
      isLoading: false,
      labelWidth: '60px',
      labelWidth1: '120px',
      snakeTableData: [],
      lbShow: true,
      statusIndex: '1',
      chooseIndex: '',
      chooseTitle: '',
      imgArr: {
        blueBg: require('@/assets/images/approveItem/div-bg/blueBg.png'),
        brownBg: require('@/assets/images/approveItem/div-bg/brownBg.png'),
        greenBg: require('@/assets/images/approveItem/div-bg/greenBg.png'),
        yellowBg: require('@/assets/images/approveItem/div-bg/yellowBg.png'),
        redBg: require('@/assets/images/approveItem/div-bg/redBg.png'),
        brown: require('@/assets/images/approveItem/table/brown.png'),
        green: require('@/assets/images/approveItem/table/green.png'),
        blue: require('@/assets/images/approveItem/table/blue.png'),
        red: require('@/assets/images/approveItem/table/red.png'),
        yellow: require('@/assets/images/approveItem/table/yellow.png'),
      },
      permission: {
        add: ["100", "1000020:add1", "1000020:add2",],
        edit: ["100", "1000020:edit1", "1000020:edit2"],
        del: ["100", "1000020:del1", "1000020:del2"],
        show: ["100", "1000020:show1", "1000020:show2"],
        add1: ["100", "批复项切换卡1:add"],
        add2: ["100", "批复项切换卡2:add"],
      },
      // 向详情子组件的传值
      postProblemDetailData: {
        show: false,
        type: 'build',
        typeNmae: '新增',
      },
      postFileDetailData: {
        show: false,
        type: 'build',
        typeNmae: '新增',
      },
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      activeName: '',
      getBehindArray: [],
      list: [],
      drawer: false,
      arrayGroup: [],
      content_box_width: '',
      companyTree: [],
      projectTree: [],
      elTableList: [],
      spanArr: [],
      leftTable: [],
      leftTableSearch: {
        pageIndex: 0,
        pageSize: 999,
        pageSum: 0,
      },
      selectList: {
        projectNature: [],
        projectList: [],
        enginTypeList: [],
        projectStage: [],
      },
      search: {
        pageIndex: 0,
        pageSize: 15,
        pageSum: 0,
        projectId: '',
        projectStage: '',
        enginType: '',
        approvalType: '',
      },
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      labelStr: {},//字典数
      itemlabelList: {},//项目选项
    }
  },
  watch: {
    'content_box_width': {
      handler(val) {
        this.dealArray()
      },
      deep: true
    },
    'activeName': {
      handler(val) {
        console.log(val)
        if (val == 'second') {
          let data = [{
            prop: 'problem',
            name: '存在问题',
            width: '250'
          }, {
            prop: 'postWeek',
            name: '所在周',
            width: '120'
          }]
          this.$set(this, 'elTableList', data)
        }
      },
      deep: true
    },
    'rightActiveName': {
      handler(val) {
        if (val == 'rightFirst') {
          this.getFirstList()
        }
        if (val == 'rightSecond') {
          this.getSecondList()
        }
      },
      deep: true
    },
    'statusIndex': {
      // immediate: true,
      handler(val) {
        console.log(val)
        if (val == 1) {
          this.getEnginTypeList()
        }
        if (val == 2) {
          this.getAllProject()
          this.changeSnake()
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.getPermission();
    this.getAllApprovalDict()
  },
  computed: {
    tableHeight: function() {
      return (window.innerHeight - 310) + 'px';
    },
    tableHeight2: function() {
      return (window.innerHeight - 200) + 'px';
    },
    LeftTableHeight: function() {
      return (window.innerHeight - 350) + 'px';
    }
  },
  methods: {
    //获取工程类型
    getEnginTypeList() {
      return new Promise((resolve, reject) => {
        crudDict.getByCode('enginType').then(res => {
          if (res.code === 200) {
            this.selectList.enginTypeList = [{ label: '不限', value: '' }]
            var data = res.data;
            for (var i in data) {
              this.selectList.enginTypeList.push({ 'value': data[i].id, 'label': data[i].name });
            }
            if (this.selectList.enginTypeList.length > 1) {
              this.search.enginType = this.selectList.enginTypeList[1].value
              this.getApproveItemDefault()
            }
          } else {
            msgUtil.error2(res.data.message)
          }
          resolve(true)
        }).catch(() => {
          msgUtil.error2("获取工程类型失败")
        })
      })
    },
    // 获取字典数，填充项
    getAllApprovalDict() {
      this.itemlabelList = {
        'ff808081877818f501894d0f97540086': [],
        'ff808081877818f501894d0fb6c30087': [],
        'ff8080818bf1932a018bfa1c9647012f': [],
        '': []
      }
      getAllApprovalDict().then(res => {
        let list = []
        res.data.map(e => {
          //标签字典项
          this.$set(this.labelStr, e.approvalKey, e.approvalName)
          let obj = { name: e.approvalName, code: e.approvalKey }
          let labelA = ['ghxz', 'tdys', 'wwbh', 'yfklz', 'dzzhpg', 'shwdxpj', 'zjlyzm', 'gkpf', 'gkwb', 'gkzx', 'gkpsh', 'ccckwyys', 'cbsjpf', 'gspg', 'gssh', 'cbsjwb', 'cbsjzx', 'cbsjpsh', 'thlz', 'fhyxpj', 'stbcbg', 'hjyxpj', 'trqgxap', 'dcxkwyys', 'sgtpf', 'sgtsjwb', 'sgtsjzx', 'sgtsjps', 'ghydxkz', 'sgzb']
          let labelB = ['ghxz', 'tdys', 'shwdxpj', 'fahs', 'gkpf', 'gkwb', 'gkzx', 'cbsjpf', 'gspg', 'cbsjwb', 'cbsjzx', 'cbsjpsh', 'stbcbg', 'hjyxpj', 'fags', 'ghydxkz', 'ts', 'sgtsjwb2', 'xf', 'rf', 'jn', 'fl', 'gcghxkz', 'sgzb']
          let labelC = ['ghxz', 'tdys', 'shwdxpj', 'fahs', 'gkpf', 'gkwb', 'gkzx', 'cbsjpf', 'gspg', 'cbsjwb', 'cbsjzx', 'cbsjpsh', 'thlz', 'fhyxpj', 'stbcbg', 'hjyxpj', 'fags', 'ghydxkz', 'ghrkqzfazt', 'ts', 'sgtsjwb2', 'gcghxkz', 'sgzb']
          if (labelA.indexOf(e.approvalKey) !== -1) {//交通工程
            this.itemlabelList["ff808081877818f501894d0f97540086"].push(obj)
          }
          if (labelB.indexOf(e.approvalKey) !== -1) {//房建工程
            this.itemlabelList["ff808081877818f501894d0fb6c30087"].push(obj)
          }
          if (labelC.indexOf(e.approvalKey) !== -1) {//市政工程
            this.itemlabelList["ff8080818bf1932a018bfa1c9647012f"].push(obj)
          }
          list.push(obj)
        })
        this.itemlabelList[''] = list
      }).catch(e => {
        msgUtil.error2("批复项字典获取失败", e)
      })
    },
    /** 选择项目 */
    getAllProject() {
      projectSectionInfo.getLeftProjectTree().then(res => {
        if (res.code === 200) {
          this.selectList.projectList = res.data
          if (this.selectList.projectList != null && this.selectList.projectList.length > 0) {
            this.search.projectId = this.selectList.projectList[0].id
            this.getLeftList()
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },
    changeSelect() {
      if (this.statusIndex == 2) {
        this.getLeftList()
      }
    },
    viewFile(e) {
      file.preview(e.id).then(response => {
        //  如果是minio地址路径，则调用kkview
        if (!response.data.startsWith("/")) {
          window.open(PREVIEW_URL + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(response.data)));
        } else {
          //  如果是转换后的previewGetFile，浏览器直接打开
          window.open(response.data);
        }
      })
    },
    changeTextStyle(val) {
      if (val == 1) {
        return {
          color: 'rgba(191, 188, 188, 1)',
        }
      }
      if (val == 2) {
        return {
          color: 'rgba(253, 143, 68, 1)',
        }
      }
      if (val == 3) {
        return {
          color: 'rgba(34, 34, 34, 1)',
        }
      }
    },
    circleDiv(item) {
      console.log(item)
      switch (item.status) {
        case '已批复':
          return 'greenCircle'
          break;
        case '进行中':
          return 'blueCircle'
          break;
      }
    },
    preview(row) {
      //不是mp4
      this.$httpGet('/file-server/file/preview?id=' + row.id).then(response => {
        //  如果是minio地址路径，则调用kkview
        if (!response.data.startsWith("/")) {
          window.open(PREVIEW_URL + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(response.data)));
        } else {
          //  如果是转换后的previewGetFile，浏览器直接打开
          window.open(response.data);
        }
      }).catch(res => {
        console.log(res)
      })
    },
    download(file) {
      this.$publicUpload.checkFile(file.id, file.fileName)
    },
    submitApproval() {
      this.isLoading = true
      let ids = []
      console.log(this.approvalFormBaseData.approvalIds)
      approvalSubmitSetting({
        projectId: this.search.projectId,
        projectStage: this.search.projectStage,
        approveIds: this.approvalFormBaseData.approvalIds.join(','),
        oldApproveIds: this.approvalFormBaseData.oldApprovalIds.join(',')
      }).then(res => {
        this.isLoading = false
        if (res.code == 200) {
          this.$messageSuccess('设置成功')
          this.cancelApprovalSelect()
          this.getLeftList()
        }
      }).catch(res => {
        this.isLoading = false
        console.log(res)
      })
    },
    cancelApprovalSelect() {
      if (this.$refs['approvalFormBase'] !== undefined) {
        this.$refs['approvalFormBase'].resetFields()
      }
      this.showApprovalDialog = false
    },
    //获取本项目需要那些前期手段？ 下拉数据
    getUnusefulApprovals() {
      getUnusefulApprovals({ projectId: this.search.projectId, projectStage: this.search.projectStage }).then(res => {
        console.log(res, 'xxxxxxxxxxx')
        if (res.data != null) {
          this.$set(this.approvalFormBaseData, 'approvalIds', res.data.split(','))
          this.$set(this.approvalFormBaseData, 'oldApprovalIds', res.data.split(','))
        }
        this.$set(this, 'approvalList', res.list)
      }).catch(res => {
        console.log(res)
      })
    },
    clickLeftText(item, index) {
      this.chooseLeftIndex = index
      this.search.pageSum = 0
      this.search.pageIndex = 0
      this.search.approvalType = this.textArr[this.chooseLeftIndex].approveId
      if (index == 0) {
        this.getAchieveSum(true)
      } else {
        if (this.rightActiveName == 'rightFirst') {
          this.getFirstList(item)
        }
        if (this.rightActiveName == 'rightSecond') {
          this.getSecondList(item)
        }
      }
    },
    getFirstList(item) {
      getListForFile({
        approvalType: this.textArr[this.chooseLeftIndex].approveId,
        companyId: '',
        projectId: this.search.projectId
      }).then(res => {
        this.$set(this, 'rightFirstList', res.data.content)
        console.log(res)
      }).catch(res => {
        console.log(res)
      })
    },
    getSecondList(item) {
      this.list = []
      getListForProblem({
        approvalType: this.textArr[this.chooseLeftIndex].approveId,
        companyId: '',
        projectId: this.search.projectId
      }).then((res) => {
        if (res.code === 200) {
          let data = res.data
          this.rightSecondList = []
          if (data.content != null) {
            let content = data.content
            content.forEach(item => {
              let temp = {}
              temp.id = item.id
              temp.createrName = item.createrName
              temp.problem = item.problem
              temp.createTime = item.createTime
              temp.postWeek = item.postWeek
              this.rightSecondList.push(temp)
            })
          }
        }
      }).catch((res) => {
        console.log('请求出现错误', res)
      })
    },
    getAchieveSum(val) {
      if (val) {
        this.leftTableSearch.pageIndex = 0
      }
      getAchieveSum({
        projectId: this.search.projectId,
        projectStage: this.search.projectStage,
        pageIndex: this.leftTableSearch.pageIndex,
        pageSize: this.leftTableSearch.pageSize,
        pageSum: this.leftTableSearch.pageSum,
      }).then(res => {
        res.list.list.forEach((item, index) => {
          item.listIndex = index
        })
        this.leftTableSearch.pageSum = res.list.total
        res.list.list.forEach((item, index) => {
          // console.log(item)
          item.approveName = item.approveName.replace('/n', '')
        })
        this.$set(this, 'leftTable', res.list.list)
        // console.log(res)
      }).catch(res => {
        console.log(res)
      })
    },
    /** 左边获取 */
    getLeftList() {
      console.log('调了')
      getLeftList({
        projectStage: this.search.projectStage,
        projectId: this.search.projectId
      }).then(res => {
        res.list.forEach((item, index) => {
          item.approveName = item.approveName.replace('/n', '')

        })
        this.$set(this, 'textArr', res.list)
        this.clickLeftText(res.list[0], 0)
      }).catch(res => {
        console.log(res)
      })
    },
    //处理小圆圈变色
    colorDiv(item) {
      switch (item.status) {
        case '可以办理':
          return 'whiteDiv'
          break;
        case '已完成':
          return 'greenDiv'
          break;
        case '已延期':
          return 'redDiv'
          break;
        case '进行中':
          return 'blueDiv'
          break;
        default:
          return 'normalDiv'
          break;

      }
    },
    getSpanArr(data) {
      console.log(data)
      let pos = 0
      this.spanArr = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].itemId === data[i - 1].itemId) {
            this.spanArr[pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            pos = i;
          }
        }
        console.log("pos=", pos);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 4) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getPermission() {
      getPermission().then(res => {
        if (res.model == 'all') {
          this.statusIndex = 1
          this.lbShow = true
        }
        if (res.model == 'dxm') {
          this.statusIndex = 2
          this.lbShow = false
        }
      }).catch(() => {
        msgUtil.error2("获取项目性质失败")
      })
    },
    getTableData() {
      if (this.statusIndex == 1) {
        this.getApproveItemDefault()
      } else {
        this.getLeftList()
      }
    },
    getApproveItemDefault() {
      this.isLoading = true
      this.snakeTableData = []
      getApprovalList(this.search).then(res => {
        let arr = []
        res.list.forEach(item => {
          let std = {}
          std.projectSimpleName = item.projectSimpleName
          std.projectId = item.projectId
          item.asVos.forEach(item2 => {
            // 赋值
            if (item2.type) {
              this.$set(std, item2.type, item2)
            }
          })
          arr.push(std)
        })
        this.snakeTableData = arr
        console.log("snakeTableData=", this.snakeTableData)
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout()
          this.$forceUpdate()
          this.isLoading = false
        })
      }).catch(() => {
        msgUtil.error2("获取列表失败")
      })
    },
    tableImgFuc(data) {
      if (data == '可以办理') {
        return this.imgArr.brown
      }
      if (data == '已完成') {
        return this.imgArr.green
      }
      if (data == '已延期') {
        return this.imgArr.red
      }
      return this.imgArr.blue
    },
    async changeSnake() {
      await this.getEnginTypeList()
      this.fixQueryA()
      this.activeName = 'first'
      // this.judgeUserCom()
      //监听窗口变化，自适应框框
      //后端获取的数组
      this.$nextTick(() => {
        this.content_box_width = document.getElementById('content-box').offsetWidth;
        window.onresize = () => {
          return (() => {
            this.content_box_width = document.getElementById('content-box').offsetWidth;
            this.dealArray()
          })();
        };
        if (this.activeName == 'first') {
          this.getList(1)
        }
        if (this.activeName == 'second') {
          this.getList(2)
        }
      })
    },
    getProjectType() {
      crudDict.getByCode('project_stage').then(res => {
        if (res.code === 200) {
          this.selectList.projectStage = []
          var data = res.data;
          for (var i in data) {
            this.selectList.projectStage.push({ 'value': data[i].id, 'label': data[i].name });
          }
          if (this.selectList.projectStage.length > 0) {
            this.search.projectStage = this.selectList.projectStage[0].value
            this.getApproveItemDefault()
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取项目类型失败")
      })
    },
    handleClose(done) {
      this.chooseIndex = ''
      this.getApproveItemDefault()
      done();
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     this.chooseIndex = ''
      //     done();
      //   })
      //   .catch(_ => {});
    },
    changeBoxColor(data) {
      if (data == '未批复') {
        return { backgroundImage: `url(${this.imgArr.brownBg})`, backgroundSize: '100% 100%' }
      } else if (data == '进行中') {
        return { backgroundImage: `url(${this.imgArr.blueBg})`, backgroundSize: '100% 100%' }
      } else if (data == '已延期') {
        return { backgroundImage: `url(${this.imgArr.redBg})`, backgroundSize: '100% 100%' }
      } else {
        return { backgroundImage: `url(${this.imgArr.greenBg})`, backgroundSize: '100% 100%' }

      }
    },
    fixQueryA() {
      if (this.search.company == undefined || this.search.company == '' || this.search.company == null) {
        if (this.statusIndex == 1) {
          this.getApproveItemDefault()
        }
      } else {
        this.search.project = this.search.company.children[0]
        if (this.statusIndex == 1) {
          this.getApproveItemDefault()
        }
      }
    },
    showAddDialog(params) {
      if (!params) {
        params = {}
      }
      let postData = {
        show: true,
        type: 'build',
        typeNmae: '新增',
        companyId: '',
        projectId: this.search.projectId,
        approvalType: this.search.approvalType,
        approvalName: this.chooseTitle,
        enginType: this.search.enginType,
        projectStage: this.search.projectStage,
        param: params,
      }
      if (this.activeName == 'first') {
        this.postFileDetailData = postData
      }
      if (this.activeName == 'second') {
        this.postProblemDetailData = postData
      }
    },
    showRightAddDialog(params) {
      if (!params) {
        params = {}
      }
      let param = this.textArr[this.chooseLeftIndex]
      let postData = {
        show: true,
        type: 'build',
        typeNmae: '新增',
        companyId: '',
        projectId: this.search.projectId,
        approvalType: this.search.approvalType,
        approvalName: param.approveName,
        param: params,
      }
      if (this.rightActiveName == 'rightFirst') {
        this.postFileDetailData = postData
      }
      if (this.rightActiveName == 'rightSecond') {
        this.postProblemDetailData = postData
      }
    },
    getListFirst() {
      this.list = []
      getListForFile(
        {
          pageIndex: this.search.pageIndex,
          pageSize: this.search.pageSize,
          pageSum: this.search.pageSum,
          projectId: this.search.projectId,
          approvalType: this.search.approvalType,
        }).then((res) => {
          if (res.code === 200) {
            let data = res.data
            let arr = []
            this.list = []
            if (data.content != null) {
              console.log(data.content, 'content')
              data.content.forEach((item, index) => {
                if (item.workContent && item.workContent.length > 0) {
                  item.workContent.forEach((child, childIndex) => {
                    child.statusName = item.status
                    child.showId = item.id
                    child.showDate = item.approvalStatus == '1' ? child.endDate : item.date
                    arr.push(child)
                    // this.list.push(child)
                  })
                } else {
                  if (!item.workContent) {
                    item.workContent = []
                  }
                  item.workContent.push({
                    statusName: item.status,
                    showId: item.id,
                    showDate: ''
                  })
                  item.workContent.forEach((child, childIndex) => {
                    child.statusName = item.status
                    child.showId = item.id
                    child.showDate = item.approvalStatus == '1' ? child.endDate : item.date
                    // this.list.push(child)
                    arr.push(child)
                  })
                }
              })
              this.list = arr
              console.log(this.list, 'content2')
              this.getSpanArr(this.list);
            }
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
        })
    },
    getListSecond() {
      this.list = []
      getListForProblem(this.search).then((res) => {
        if (res.code === 200) {
          this.list = []
          let data = res.data
          if (data.content != null) {
            let content = data.content
            content.forEach((item, index) => {
              let temp = {}
              temp.id = item.id
              temp.createrName = item.createrName
              temp.problem = item.problem
              temp.createTime = item.createTime
              temp.postWeek = item.postWeek
              temp.listIndex = index
              this.list.push(temp)
            })
          }
        }
      }).catch((res) => {
        console.log('请求出现错误', res)
      })
    },
    getList(val) {
      this.clickLeftText(this.textArr[this.chooseLeftIndex], this.chooseLeftIndex)
      this.list.splice(0, this.list.length)
      if (val === 1) {
        getListForFile(this.search).then((res) => {
          if (res.code === 200) {
            let data = res.data
            if (data.content != null) {
              let content = data.content
              content.forEach(item => {
                let temp = {}
                temp.id = item.id
                temp.createrName = item.createrName
                temp.fileTitle = item.fileTitle
                temp.createTime = item.createTime
                temp.date = item.date
                this.list.push(temp)
              })
            }
          } else {
            // this.$messageError(res.data.message)
          }
        })
          .catch((res) => {
            console.log('请求出现错误', res)
          })
      }
      if (val === 2) {
        getListForProblem(this.search).then((res) => {
          if (res.code === 200) {
            let data = res.data
            if (data.content != null) {
              let content = data.content
              content.forEach(item => {
                let temp = {}
                temp.id = item.id
                temp.createrName = item.createrName
                temp.problem = item.problem
                temp.createTime = item.createTime
                temp.postWeek = item.postWeek
                this.list.push(temp)
              })
            }
          } else {
          }
        })
          .catch((res) => {
            console.log('请求出现错误', res)
          })
      }
    },
    // 切换列表
    leftTablePaginationChange(index) {
      this.leftTableSearch.pageIndex = index - 1
      this.getAchieveSum()
    },
    // 切换列表
    paginationChange(index) {
      this.search.pageIndex = index - 1
      if (this.activeName == 'first') {
        this.getList(1)
      }
      if (this.activeName == 'second') {
        this.getList(2)
      }

    },
    cellClick2(row, column, cell, event) {
      if (column.property === 'fileTitle' || column.property === 'problem') {
        this.handleClickDeal(row, 'show')
      }
    },
    cellClick(row, column, cell, event) {
      if (column.property == 'projectSimpleName') {
        return
      }
      //赋值
      if (this.labelStr[column.property]) {
        this.search.approvalType = row[column.property].id
        this.chooseTitle = this.labelStr[column.property]
      }
      //
      this.search.projectId = row.projectId
      this.drawer = true
      this.activeName = 'first'
      this.getListFirst()
    },
    handleSelectionChange() {

    },
    clickBox(item, index) {
      console.log(item)
      if (item.name.indexOf('/n') > -1) {
        this.chooseTitle = item.name.replace("/n", "")
      } else {
        this.chooseTitle = item.name
      }
      this.chooseIndex = index
      this.drawer = true
      this.search.approvalType = item.id
      if (this.activeName == 'first') {
        this.getList(1)
      }
      if (this.activeName == 'second') {
        this.getList(2)
      }
    },
    showDownArrows(arrayGroup, index, item, childIndex, child) {
      //如果是最后一排 隐藏箭头
      if (index == arrayGroup.length - 1) {
        return {
          'visibility': 'hidden'
        }
      }
      if (this.oddOrEven(index + 1) == 'even') {
        //如果是倒叙的那一行
        if (childIndex == 0 && !!arrayGroup[index + 1]) {
          return {
          }
        } else {
          return {
            'visibility': 'hidden'
          }
        }
      } else {

        try {
          //如果是正序的那一行
          if (arrayGroup[index + 1]) {
            if (childIndex == item.length - 1 && arrayGroup[index + 1].length > 0) {
              return {
              }
            } else {
              return {
                'visibility': 'hidden'
              }
            }
          }

        } catch (e) {
          console.log(e)
        }

      }
    },
    handleClick() {
      console.log("statusIndex=", this.statusIndex)
      if (this.statusIndex == 1) {
        if (this.activeName == 'first') {
          this.getListFirst()
        }
        if (this.activeName == 'second') {
          this.getListSecond()
        }
      } else {
        if (this.activeName == 'first') {
          this.getList(1)
        }
        if (this.activeName == 'second') {
          this.getList(2)
        }
      }
    },
    dealArray() {
      let line = Number(this.content_box_width) / 288   //一共line列
      let array = this.chunk(this.getBehindArray, Math.round(line))
      array.forEach((item, index) => {
        if (this.oddOrEven(index + 1) == 'even') {
          array[index] = array[index].reverse()
        }
      })
      console.log(this.arrayGroup, '==============')
      this.$set(this, 'arrayGroup', array)
    },
    snakeData() {
      let projectId = ''
      if (this.search.project == undefined) {
        projectId = ''
      } else {
        projectId = this.search.projectId
      }
      return getSnakeData({
        companyId: '',
        projectId: projectId
      }).then(res => {
        return new Promise((resolve, reject) => {
          resolve(res)
        })
      }).catch(res => {
        console.log(res)
      })
    },
    chunk(array, size) {
      //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
      const length = array.length
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return []
      }
      //核心部分
      let index = 0 //用来表示切割元素的范围start
      let resIndex = 0 //用来递增表示输出数组的下标

      //根据length和size算出输出数组的长度，并且创建它。
      let result = new Array(Math.ceil(length / size))
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size))
      }
      //输出新数组
      return result
    },
    oddOrEven(val) {
      if (val % 2 == 0) {
        return "even";
      } else {
        return "odd";
      }
    },
    handleClickDeal(row, type) {
      let detailId = row.showId ? row.showId : row.id
      switch (type) {
        // 修改
        case 'update':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
            show: true,
            approvalName: this.chooseTitle,
          })
          break
        // 查看
        case 'show':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
            approvalName: this.chooseTitle,
          })
          break
        case 'delete':
          this.$confirm('确定是否删除？', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {

            if (this.statusIndex == 1) {
              if (this.activeName == 'first') {
                delItem({ ids: detailId.split(',') }).then(res => {
                  this.getListFirst()
                  this.getApproveItemDefault()
                  this.$message.warning2('删除数据成功')
                }).catch(res => {
                })
              }
              if (this.activeName == 'second') {
                delProblem({ ids: detailId.split(',') }).then(res => {
                  this.getListSecond()
                  this.getApproveItemDefault()
                  this.$message.warning2('删除数据成功')
                }).catch(res => {
                })
              }
            } else {
              if (this.activeName == 'first') {
                delItem({ ids: detailId.split(',') }).then(res => {
                  this.getList(1)
                  this.dealDataSnake()
                  this.getApproveItemDefault()
                  this.$message.warning2('删除数据成功')
                }).catch(res => {
                })
              }
              if (this.activeName == 'second') {
                delProblem({ ids: detailId.split(',') }).then(res => {
                  this.getList(2)
                  this.getApproveItemDefault()
                  this.$message.warning2('删除数据成功')
                }).catch(res => {
                })
              }
            }

          })
            .catch(() => { })
          console.log('请求出现错误')
          break
      }
    },
    // 显示详情弹窗 不同状态
    showDetailDialog(flag, params) {
      if (!params) {
        params = {}
      }
      let postData = {}
      switch (flag) {
        case 'build':
          postData = {
            show: true,
            type: 'build',
            typeName: '新增',
            params: params,
          }
          break
        case 'update':
          postData = {
            show: true,
            type: 'edit',
            typeName: '编辑',
            approvalName: params.approvalName,
            params: params,
          }
          break
        case 'show':
          postData = {
            show: true,
            type: 'check',
            typeName: '查看',
            approvalName: params.approvalName,
            params: params,
          }
          break
      }
      if (this.activeName == 'first') {
        this.postFileDetailData = postData

      }
      if (this.activeName == 'second') {
        this.postProblemDetailData = postData
      }

    },
    rightHandleClickDeal(row, type) {
      let detailId = row.showId ? row.showId : row.id
      let param = this.textArr[this.chooseLeftIndex]
      switch (type) {
        // 修改
        case 'update':
          // 显示详情弹窗
          this.rightShowDetailDialog(type, {
            detailId: detailId,
            show: true,
            approvalName: param.approveName,
          })
          break
        // 查看
        case 'show':
          // 显示详情弹窗
          this.rightShowDetailDialog(type, {
            detailId: detailId,
            approvalName: param.approveName,
          })
          break
        case 'delete':
          this.$confirm('确定是否删除？', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            if (this.rightActiveName == 'rightFirst') {
              delItem({ ids: detailId.split(',') }).then(res => {
                this.getFirstList()
                this.getLeftList()
                this.$message.warning2('删除数据成功')
              }).catch(res => {
              })
            }
            if (this.rightActiveName == 'rightSecond') {
              delProblem({ ids: detailId.split(',') }).then(res => {
                this.getSecondList()
                this.getLeftList()
                this.$message.warning2('删除数据成功')
              }).catch(res => {
              })
            }
          })
            .catch(() => {

            })
          console.log('请求出现错误')
          break
      }
    },
    // 显示详情弹窗 不同状态
    rightShowDetailDialog(flag, params) {
      if (!params) {
        params = {}
      }
      let postData = {}
      switch (flag) {
        case 'build':
          postData = {
            show: true,
            type: 'build',
            typeName: '新增',
            params: params,
          }
          break
        case 'update':
          postData = {
            show: true,
            type: 'edit',
            typeName: '编辑',
            approvalName: params.approvalName,
            params: params,
          }
          break
        case 'show':
          postData = {
            show: true,
            type: 'check',
            typeName: '查看',
            approvalName: params.approvalName,
            params: params,
          }
          break
      }
      if (this.rightActiveName == 'rightFirst') {
        this.postFileDetailData = postData

      }
      if (this.rightActiveName == 'rightSecond') {
        this.postProblemDetailData = postData
      }

    },
  }
}
</script>

<style scoped lang="scss">
.operate_wrap {
  .select {
    width: 250px;
    margin-right: 15px;
  }
}
.list_wrap {
  margin-top: 20px;
}
.content-box {
  height: calc(100vh - 310px);
  width: calc(100% - 38px);
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  margin: 25px auto 10px;
  border-top: 1px #e2e8ec solid;
  .content-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .content {
    display: flex;
    flex-direction: row;
    .box-content {
      display: flex;
      flex-direction: column;
    }
    .down-arrows {
      width: 180px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 30px;
        height: 30px;
      }
    }
    .box {
      width: 180px;
      height: 94px;
      border-radius: 7px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      .number-box {
        position: absolute;
        left: 10px;
        top: 0;
        width: 50px;
        height: 60px;
        background: linear-gradient(
          45deg,
          transparent 50%,
          rgba(255, 255, 255, 0) 0%
        );
        background-size: 60px 60px;
        border-top-right-radius: 10px;
        transform: rotate(-90deg);
        display: flex;
      }
      .box-text {
        font-size: 16px;
        color: #ffffff;
        white-space: nowrap;
        font-weight: bold;
      }
      .box-number {
        font-size: 17px;
        line-height: 14px;
        color: #fff;
        transform: rotate(90deg);
        position: absolute;
        left: 25px;
        top: 9px;
      }
    }
    .box:hover {
      box-shadow: 5px 5px 10px rgba(44, 62, 80, 0.2);
    }
    .arrows-box {
      width: 100px;
      height: 94px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .arrows {
      width: 30px;
      height: 30px;
    }
  }
}
.flex-hvCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-hv {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.title-box {
  position: relative;
  .drawer-span {
    position: absolute;
    left: 2%;
    top: calc(50% - 20px);
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
}
.status-box {
  font-size: 13px;
  line-height: 17px;
  font-weight: bold;
  margin-top: 10px;
}
.box-gougou {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  i {
    font-size: 6px;
    color: #fff;
  }
}
.chooseClass {
  box-shadow: 5px 5px 10px #2c3e50;
}
.snake-box {
  width: 600px;
}
.status-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 15px;
  img {
    width: 30px;
    margin-right: 5px;
  }
  span {
    font-size: 16px;
    font-family: "MicrosoftYaHei", "Microsoft YaHei";
    color: rgba(112, 112, 112, 1);
  }
}
.status-iconfont {
  margin: 0 20px;
  i {
    cursor: pointer;
    font-size: 33px;
    padding: 5px;
  }
}
.changeBlue {
  color: rgba(0, 95, 255, 1);
}
.img-box {
  cursor: pointer;
  img {
    width: 25px;
  }
}
.chooseFileName:hover {
  text-decoration: underline;
}
.left-box {
  width: 250px;
  border-right: 1px #e2e8ec solid;
  margin-bottom: 15px;
  padding-top: 20px;
  position: relative;
  p {
    cursor: pointer;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    margin: 10px 0 5px 0;
  }
  .left-box-scroll {
    max-height: 95%;
    overflow-y: auto;
    p {
      max-width: 81%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .left-bottom-box {
    width: 90%;
    height: 33px;
    border: 1px solid #216ceb;
    border-radius: 4px;
    position: absolute;
    bottom: -10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #005fff;
    cursor: pointer;
  }
}
.right-box {
  padding: 15px 0px 15px 25px;
  flex-grow: 1;
  position: relative;
  .list_wrap {
    width: 100%;
  }
  .right-add-box {
    position: absolute;
    right: 0;
    top: 11px;
    z-index: 999;
  }
}
//颜色小圆圈
.baseDiv {
  width: 12px;
  height: 12px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  margin-right: 20px;
}
.whiteDiv {
  background: #fff;
}
.yellowDiv {
  background: rgba(245, 154, 35, 1);
}
.blueDiv {
  background: rgba(0, 95, 255, 1);
}
.greenDiv {
  background: rgba(17, 201, 108, 1);
}
.redDiv {
  background: rgba(221, 75, 57, 1);
}
.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.chooseText {
  color: #008fe0;
}
.file-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.rightFirst {
  padding: 1px 0;
  padding-bottom: 20px;
  max-height: calc(100vh - 400px);
  overflow-y: auto;
}
.rightFirstItem {
  width: 97%;
  background: #ffffff;
  border-radius: 8px;
  margin: 1.5% auto 0;
  padding: 15px;
  box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.3);
}
.greenCircle {
  width: 26px;
  height: 26px;
  background: #11c96c;
  border: 2px solid #ffffff;
  border-radius: 50%;
  margin-right: 10px;
}
.blueCircle {
  width: 26px;
  height: 26px;
  background: #005fff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  margin-right: 10px;
}
.statusSpan {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #222222;
  margin-right: 10px;
}
.normalText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}
.blueText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 95, 255, 1);
  cursor: pointer;
}
.redText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(221, 75, 57, 1);
  cursor: pointer;
}
.item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 20px 35px;
  .solid-line {
    flex-grow: 1;
    height: 1px;
    border: 1px dashed #bfbfbf;
  }
  span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
}
.file-box {
  margin-left: 35px;
  .file-item {
    margin-bottom: 10px;
    span {
      width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      margin-right: 15px;
      text-decoration: underline;
      color: rgba(0, 95, 255, 1);
      cursor: pointer;
    }
  }
}
.blue-file-text {
  margin-bottom: 10px;
  text-align: left;
  margin-top: 5px;
  span {
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    margin-right: 15px;
    text-decoration: underline;
    color: rgba(0, 95, 255, 1);
    cursor: pointer;
  }
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
